<template>
  <div>
    <div class="dis_top">检查项目结果状态列表</div>
    <div class="back"></div>
    <div class="dis_flex" ref="minibox">
      <div class="flex_l">
        <div class="l_right">
          <div>检查项目状态列表 ( {{ this.nocheck }} / {{ this.checklist.length }} )</div>

          <div v-for="(item,index) in checklist" :key="index" class="list_ch">
            <div style="margin-bottom: 15px" @click="goAssignBlock('block'+ index,100)">
              <el-checkbox label="" v-model="item.status" :checked="item.checkStatus===1" :disabled="true"></el-checkbox>
              <span style="margin-left: 5px">{{ item.itemName }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="flex_r">
        <!-- 右侧标签页 -->
        <div>
          <div class="r_box">
            <div style="height:90px"></div>
            <div class="r_box_top">
              <el-row >
                <el-col :span="6">体检编号:{{ peOrdersMain.orderNo }}</el-col>
                <el-col :span="4">姓名:{{ peOrdersMain.customerName }}</el-col>
                <el-col :span="4">性别:{{ peOrdersMain.sex == 1 ? "女" : peOrdersMain.sex == 2 ? "男" : peOrdersMain.sex }}</el-col>
                <el-col :span="4">年龄:{{ peOrdersMain.age }}</el-col>
                <el-col :span="4">合同名称:{{ peOrdersMain.contractName }}</el-col>
              </el-row>
            </div>
            <div>
              <div v-for="(item,index) in peOrdersDetailsList" style="border: 1px solid #efefef; margin-bottom: 25px" :key="index" :ref="'block'+index">
                <div class="table-head bj_doctor">
                  <el-row>
                    <el-col :span="4">
                      <span>体检科室：{{ item.deptName }}</span>
                    </el-col>
                    <el-col  :span="4">体检医师：{{ item.examRecord.doctorName }}</el-col>
                    <el-col :span="4">
                      检查日期：{{formatDate(item.examRecord.editTime) }}
                    </el-col>
                    <el-col  :span="4">
                      已检：<el-checkbox v-model="item.examRecord.checkStatus!==1"></el-checkbox>
                    </el-col>
                  </el-row>
                </div>
                <el-table
                    size="medium"
                    :data="item.examItemContentDetails"
                    style="width: 100%"
                >
                  <el-table-column
                      label="检查内容"
                      prop="contentName"
                      width="120"
                  >
                  </el-table-column>
                  <el-table-column label="检查结果" width="400">
                    <template slot-scope="scope">
                      {{ scope.row.examContentsResult.resultValue }}
                    </template>
                  </el-table-column>
                  <el-table-column
                      label="单位"
                      prop="units"
                      width="80">
                  </el-table-column>
                  <el-table-column label="趋势" width="120">
                    <template slot-scope="scope">
                      {{ scope.row.examContentsResult.trend }}
                    </template>
                  </el-table-column>
                  <el-table-column label="参考范围" prop="normalDisplaychar">
                    <template slot-scope="scope">
                      <span>{{ scope.row.minLimit }}——{{ scope.row.maxLimit }}</span>
                    </template>
                  </el-table-column>
                </el-table>
                <!-- 检查结果 -->
                <el-row class="r_box_con_res">
                  <el-col :span="2">科室小结</el-col>
                  <el-col :span="18">
                    <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="item.diagnosisResult">
                  </el-input>

                  </el-col>
                </el-row>
              </div>
            </div>
            <div>
              <el-button type="primary" @click="huitui">返回</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  data() {
    return {
      nocheck:0,
      vaule1: "",
      resultArr: [],
      moreVisible: false,
      moreList: {},
      trendOptions: [
        {label: "↑", value: 1},
        {label: "↓", value: 2},
        {label: "--", value: 3},
      ],
      toMoreItemIndex: 0,
      toMoreItemRecordIndex: 0,
      multipleTablelist: [],
      deptName: "",
      ordersId: '',
      userName: '',
      userId: '',
      peOrdersDetailsList: [],
      orderDict: {},
      checklist: [

      ],
      peOrdersDetail: {},
      peOrdersMain: {},
      examItemContentDetails: [],
      formInline: {
        region: '',
        user: '',
      },
      deptIds: [],
      form: {
        diagnosisResult: ""
      },
      resultDict: [],
      // 页码
      pageSize: 10,
      pageNo: 1,
      total: 0,
      checkStatu: [],
      orderId: '',
      sizeshow: 2
    }
  },
  created() {
    this.getPeExamRecordDetail()
    this.ordersId = this.$route.query.ordersId
  },
  methods: {
    huitui() {
      this.$router.go(-1)
    },
    getPeExamRecordDetail() {
      this.$axios.getPeOrdersAllDetails({
        orderNo: this.$route.query.ordersId,
      }).then(res => {
        if (res.code === "00000") {
          this.peOrdersMain = res.data.peOrdersMain
          this.orderId = res.data.peOrdersMain.orderId
          var peOrdersDetailsList = res.data.peOrdersDetailsList
          peOrdersDetailsList.forEach(v => {
            this.orderDict[v.itemId] = v
            // 设置默认时间
            if (v.examRecord.editTime == null || v.examRecord.editTime == "") {
              this.$set(v.examRecord, "editTime", new Date())
            }
            v.examItemContentDetails.forEach((it, ix) => {
              if (it.trendDisplaychar != null) {
                v.examItemContentDetails[ix].trendDisplaychar = v.examItemContentDetails[ix].trendDisplaychar.split("|")
              }
            })
            v.box = 0
            // 左侧列表
            this.checklist.push({
              itemId: v.itemId,
              itemName: v.itemName,
              checkStatus: v.checkStatus
            })

            if (v.checkStatus === 1) {
              this.nocheck += 1
            }
          })
          this.peOrdersDetailsList = peOrdersDetailsList
        }
      })
    },
    goAssignBlock(el, speed) {
      let _this = this;
      let windowH = window.innerHeight; //浏览器窗口高度
      let h = this.$refs[el][0].offsetHeight; //模块内容高度
      let t = this.$refs[el][0].offsetTop; //模块相对于内容顶部的距离
      let top = t - 100; //需要滚动到的位置，若改为 t 则滚动到模块顶部位置，此处是滚动到模块相对于窗口垂直居中的位置
      let scrollTop = this.$refs.minibox.scrollTop; //滚动条距离顶部高度
      let currentTop = scrollTop; //默认滚动位置为当前滚动条位置，若改为0，则每次都会从顶部滚动到指定位置
      let requestId;
      this.$refs.minibox.scrollTop = t - 120
    }
  },
}
</script>
<style scoped>
.dis_top {
  position: absolute;
  z-index: 3;
  top: 0px;
  left: 0px;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  color: #000000;
  font-weight: bold;
  width: calc(100% - 10px);
  background: #ffffff;
}

.dis_top > div {
  display: flex;
  align-items: center;
}

.dis_top > div > span {
  margin-left: 20px;
}

.dis_flex {
  display: flex;
  margin-top: 30px;
  height: 85vh;
  overflow-y: scroll;
  overflow-x: hidden;

}

.back {
  position: absolute;
  top: 20px;
  height: 20px;
  width: 100%;
  z-index: 2;
  background: #f0f0f0;
}

.flex_r > div {
  background-color: #ffffff;
}

.flex_l {
  width: 300px !important;
  flex-shrink: 0;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  /* background-color: #fff; */
  overflow: hidden;
}

.r_box {
  margin-left: 10px;
  /* margin-bottom: 20px; */
  width: 1300px;
  line-height: 25px;
  border: 1px solid #efefef;
  overflow: hidden;
}

.r_box_con {
  padding-left: 20px;
  padding-right: 20px;
}

.flies_box {
  margin-left: 20px;
  margin-bottom: 20px;
  width: 1300px;
  line-height: 25px;
}

.flies {
  margin-top: 15px;
}

.flies p {
  margin-bottom: 10px;
}

.r_box_con_title {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  border-bottom: 1px solid #333;
  font-size: 18px;
  line-height: 30px;
}

.r_box_con_bor {
  border-bottom: 1px solid #333;
  padding-bottom: 10px;
}

.r_box_con_box {
  margin-top: 10px;
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 45px;
}

.r_box_con_sl1 {
  padding: 0px 5px;
  width: 20%;
}

.r_box_con_sl2 {
  padding: 0px 5px;
  width: 30%;
}

.r_box_con_sl3 {
  padding: 0px 5px;
  width: 10%;
}

.r_box_con_sl4 {
  padding: 0px 5px;
  width: 15%;
}

.r_box_con_sl5 {
  padding: 0px 5px;
  width: 15%;
}

.r_box_con_sl6 {
  padding: 0px 5px;
  width: 10%;
}

.r_box_con_res {
  margin-top: 20px;
}

.el-form--inline .el-form-item {
  margin: 0;
}

.textarea {
  width: 600px
}

.r_box_con_res /deep/ .el-form-item__label {
  font-size: 22px !important;
}

.r_box_con_bottom {
  margin-top: 20px;
  display: flex;
}

.r_box_con_bottom div {
  margin-right: 15px;
}

.l_left {
  color: #7F7F7F;
  font-weight: bold;
  height: 36px;
}

/* .list_ch {

} */
.r_box_top {
  width: 75%;
  max-width: 1258px;
  /* min-width: 1300px; */
  padding: 20px;
  position: absolute;
  top: 40px;
  background-color: #ffffff;
  z-index: 2;
}

.flex_r {
  background: #ffffff;
  /* overflow-y: scroll; */
}

.r_list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 30px;
  color: #666666;
}

.r_list:hover {
  color: #2F9688;
  font-weight: bold;
}

.l_right {
  width: 280px;
  background: #fff;
  height: 80%;
  padding: 10px;
  position: absolute;
  top: 40px;
}

.diagnose > div:first-child {
  display: flex;
}

.bj_doctor {
  background: #E5F6FE;
  padding: 20px;
}

.butt {
  display: flex;
  align-items: center
}

.bottons {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bottons .el-checkbox {
  margin-left: 20px;
}

.buttons {
  padding: 10px 70px;
  margin-bottom: 30px;
}

.save {
  padding: 10px 30px;
  margin-left: 100px;
}

/* .ckbox{
  display: flex;
} */
.dis_flex /deep/ .el-table td {
  padding: 0 !important;
}

.boxcheck {
  margin: 0 10px;
}

.checklist /deep/ .el-checkbox {
  margin-right: 10px;
}

.checkName {
  display: flex;
}
</style>
